<template>
		<el-container>
				<el-main>
          <div class="login">
            <div>
              <h2 style="color: #3a8ee6">开启你的梦想之旅</h2>
            </div>
            <div>
              <el-input
                placeholder="用户名"
                suffix-icon="el-icon-service"
                v-model="user.userName">
              </el-input>
            </div>
            <div style="margin-top: 20px;">
              <el-input
                type="password"
                placeholder="密码"
                suffix-icon="el-icon-edit"
                v-model="user.passWord">
              </el-input>
            </div>
            <div style="margin-top: 20px;">
              <el-button type="primary" @click="login">登陆</el-button>
            </div>
          </div>
				</el-main>
		</el-container>
</template>

<script>
	export default{
		name:'Login',
    methods: {
      login() {
        var that = this;
        if (!that.user.userName) {
          this.$message.error('请输入用户名');
          return;
        }
        if (!that.user.passWord) {
          this.$message.error('请输入密码');
          return;
        }
        this.$api.post('/backgroundLogin',that.user,function(data){
          if(data.flag=="success"){
            that.$store.commit("SET_TOKEN",data)
            that.$store.commit("GET_USER",that.user.userName)
            that.$router.push('/task/list');
          } else{
            that.$message.error(data.msg);
          }
        });
      }
    },
    data(){
		  return {
		    user:{
          userName: '',
          passWord: ''
        }
      }
    },

  }
</script>

<style scoped>
  .login {
    width: 100%;
    height: 300px;
    text-align: center;
    position: absolute;
    margin: auto;
    top: 20%;
  }
  .el-input {
    width: 600px;
  }
  .el-button {
    width: 600px;
  }
</style>
